<template>
    <el-dialog id="company-user-show"
               append-to-body
               top="5vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="user"></icon>
                企业用户 {{ companyUser.uid }}
            </span>
        </div>

        <!-- 操作按钮 -->
        <div class="text-center">
            <el-button-group>
                <el-button size="medium" @click="handleReload">
                    <icon name="refresh"></icon>
                    重新载入
                </el-button>
                <el-button size="medium"
                           :disabled="isEmpty(companyUser.company_basic)"
                           @click="dialogCompanyBasicShow(companyUser.company_basic.id)">
                    <icon name="company-basic"></icon>
                    企业信息
                </el-button>
                <el-button size="medium" @click="dialogCompanyJobUser(companyUser.uid)">
                    <icon name="post"></icon>
                    招聘职位
                </el-button>
                <el-button size="medium" @click="dialogCompanyUserReceiveResumeSend(companyUser.uid)">
                    <icon name="resume-send"></icon>
                    收到的简历
                </el-button>
                <el-button size="medium" @click="dialogCompanyUserInterview(companyUser.uid)">
                    <icon name="interview"></icon>
                    发送的面试
                </el-button>
                <el-button size="medium">
                    <icon name="refresh"></icon>
                    刷新记录
                </el-button>
                <el-button size="medium">
                    <icon name="record"></icon>
                    登录记录
                </el-button>
            </el-button-group>
        </div>

        <!-- 会员 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <span class="detail-project__label">会员</span>
                    </div>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 会员 -->
                <el-descriptions-item label="用户名："
                                      :content-style="{width: '360px'}">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input v-model="model.username"
                                      size="medium"
                                      placeholder="用户名"
                                      maxlength="15"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-button size="medium"
                                       :type="!isUsername(model.username) || model.username === companyUser.username ? 'info' : 'success'"
                                       :disabled="!isUsername(model.username) || model.username === companyUser.username"
                                       @click="handleModifyUsername">
                                <icon name="modify"></icon>
                                修改
                            </el-button>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 密码 -->
                <el-descriptions-item label="密码：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input v-model="model.password"
                                      size="medium"
                                      placeholder="密码"
                                      minlength="6"
                                      maxlength="16"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-button v-if="model.password && isPassword(model.password)"
                                       type="warning"
                                       size="medium"
                                       @click="handleModifyPassword(model.password)">
                                <icon name="lock1"></icon>
                                修改
                            </el-button>
                            <el-tooltip v-else
                                        :content="`初始密码：${initPassword}`" placement="top">
                                <el-popconfirm icon="el-icon-info"
                                               :title="`初始化密码【${initPassword}】确定！`"
                                               @confirm="handleModifyPassword(initPassword)">
                                    <el-button slot="reference"
                                               type="success"
                                               size="medium">
                                        <icon name="initial"></icon>
                                        初始
                                    </el-button>
                                </el-popconfirm>
                            </el-tooltip>

                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 公司名称 -->
                <el-descriptions-item label="公司名称：">
                    <el-input v-model="model.company_name"
                              size="medium"
                              placeholder="公司名称"></el-input>
                </el-descriptions-item>
                <!-- 联系人 -->
                <el-descriptions-item label="联系人：">
                    <el-input v-model="model.contacts"
                              size="medium"
                              maxlength="4"
                              placeholder="联系人"></el-input>
                </el-descriptions-item>
                <!-- 手机号码 -->
                <el-descriptions-item label="手机号码：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input v-model="model.mobile"
                                      size="medium"
                                      maxlength="11"
                                      placeholder="手机号码"
                                      :disabled="companyUser.bind.mobile"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-button v-if="!companyUser.bind.mobile"
                                       size="medium"
                                       type="success"
                                       :disabled="!isMobile(model.mobile)"
                                       @click="handleBindMobile">
                                <icon name="binding"></icon>
                                绑定
                            </el-button>
                            <!-- 解绑 -->
                            <el-popconfirm v-else
                                           title="确定解除 “手机号码绑定” ？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleUnBind({type: 'mobile', mobile_id: 0, mobile: model.mobile})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(companyUser.bind.mobile)">
                                    <icon name="unbind"></icon>
                                    解绑
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 邮箱 -->
                <el-descriptions-item label="邮箱：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input v-model="model.email"
                                      size="medium"
                                      placeholder="电子邮件"
                                      :disabled="companyUser.bind.email"></el-input>
                        </div>
                        <div class="ml-10">
                            <!-- 绑定 -->
                            <el-button v-if="!companyUser.bind.email"
                                       size="medium"
                                       type="success"
                                       :disabled="!isEmail(model.email)"
                                       @click="handleBindEmail">
                                <icon name="binding"></icon>
                                绑定
                            </el-button>
                            <!-- 解绑 -->
                            <el-popconfirm v-else
                                           title="确定解除 “邮箱绑定” ？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleUnBind({type: 'email', email_id: 0, email: model.email})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(companyUser.bind.email)">
                                    <icon name="unbind"></icon>
                                    解绑
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 联系人 -->
                <el-descriptions-item label="电话号码：" :span="2">
                    <el-input v-model="model.phone"
                              size="medium"
                              placeholder="电话号码"></el-input>
                </el-descriptions-item>
                <!-- 会员 -->
                <el-descriptions-item label="会员："
                                      :content-style="{width: '360px'}">
                    <el-tag class="font-s14 is-round"
                            :type="companyUser.vip.level === 0 ? 'info' : `v${companyUser.vip.level}`">
                        <icon :name="companyUser.vip.icon"></icon>
                        {{ companyUser.vip.name }}
                    </el-tag>
                </el-descriptions-item>
                <!-- 到期时间 -->
                <el-descriptions-item label="到期时间：">
                    <div v-if="companyUser.vip_time">
                        <el-tag v-show="!companyUser.is_vip"
                                class="font-s14 is-round"
                                type="danger"
                                effect="dark">
                            <icon name="warning"></icon>
                            已到期
                        </el-tag>
                        <!-- 到期时间 -->
                        <el-tag class="ml-5 font-s14 is-round"
                                effect="dark"
                                :type="companyUser.is_vip ? 'success' : 'danger'">
                            <icon name="time"></icon>
                            {{ companyUser.vip_time }}
                        </el-tag>
                        <!-- 剩余 -->
                        <el-tag v-show="companyBasic.vip_expire_day > 0"
                                class="ml-5 font-s14 is-round"
                                effect="dark"
                                type="success">
                            剩余 <strong>{{ companyBasic.vip_expire_day }}</strong> 天
                        </el-tag>
                        <!-- 到期 -->
<!--                        <el-button v-show="!companyUser.is_vip"-->
<!--                                   class="font-s14"-->
<!--                                   type="warning"-->
<!--                                   size="small"-->
<!--                                   disabled-->
<!--                                   round>-->
<!--                            <icon name="warning"></icon>-->
<!--                            已到期-->
<!--                        </el-button>-->
<!--                        <el-button class="ml-10 font-s14"-->
<!--                                   :type="companyUser.is_vip ? 'success' : 'danger'"-->
<!--                                   size="small"-->
<!--                                   disabled-->
<!--                                   round>-->
<!--                            <icon name="time"></icon>-->
<!--                            {{ companyUser.viptime }}-->
<!--                        </el-button>-->
                    </div>
                    <div v-else
                         class="text-info-light">
                        无
                    </div>
                </el-descriptions-item>
                <!-- 查看简历数 -->
                <el-descriptions-item label="限制简历数：">
                   <div class="r-flex">
                       <div class="r-flex__item">
                           <el-input v-model="model.look_resume_number"
                                     type="number"
                                     size="medium"
                                     maxlength="8"
                                     placeholder="每天查看简历数"></el-input>
                       </div>
                       <div class="ml-10">
                           <strong> / 每天</strong>
                       </div>
                   </div>
                </el-descriptions-item>
                <!-- 积分 -->
                <el-descriptions-item label="积分：">
                    <el-input v-model="model.integral"
                              type="number"
                              size="medium"
                              maxlength="8"
                              placeholder="免费积分"></el-input>
                </el-descriptions-item>
                <!-- 简历数 -->
                <el-descriptions-item label="简历数：">
                    <el-input v-model="model.resume_number"
                              type="number"
                              size="medium"
                              maxlength="8"
                              placeholder="免费简历数"></el-input>
                </el-descriptions-item>
                <!-- VIP 内简历数 -->
                <el-descriptions-item label="VIP 内简历数：">
                    <el-input v-model="model.vip_resume_number"
                              type="number"
                              size="medium"
                              maxlength="8"
                              placeholder="VIP 内简历数"></el-input>
                </el-descriptions-item>
                <!-- VIP 职位数 -->
                <el-descriptions-item label="VIP 职位数：">
                    <el-input v-model="model.vip_post_number"
                              type="number"
                              size="medium"
                              maxlength="8"
                              placeholder="会员内职位数"></el-input>
                </el-descriptions-item>
                <!-- VIP 期内积分 -->
                <el-descriptions-item label="VIP 期内积分：">
                    <el-input v-model="model.vip_integral"
                              type="number"
                              size="medium"
                              maxlength="8"
                              placeholder="VIP 期内积分"></el-input>
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <!-- 绑定 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <span class="detail-project__label">绑定</span>
                    </div>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- QQ -->
                <el-descriptions-item label="QQ：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input :value="companyUser.qqopenid || '无'" size="medium" disabled
                                      placeholder="QQ 绑定"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-popconfirm title="确定解除 “QQ 绑定” ？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleLogoutClient({type: 'qqopenid'})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(companyUser.bind.qq)"
                                           :disabled="!companyUser.bind.qq">
                                    <icon name="unbind"></icon>
                                    解绑
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 微信 -->
                <el-descriptions-item label="微信：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input :value="companyUser.wechatopenid || '无'" size="medium" disabled
                                      placeholder="微信绑定"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-popconfirm title="确定解除 “微信绑定” ？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleLogoutClient({type: 'wechatopenid'})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(companyUser.bind.wechat)"
                                           :disabled="!companyUser.bind.wechat">
                                    <icon name="unbind"></icon>
                                    解绑
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 微信公众平台 -->
                <el-descriptions-item label="微信公众平台：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input :value="companyUser.wechatmpopenid || '无'" size="medium" disabled
                                      placeholder="微信绑定"></el-input>
                        </div>
                        <div class="ml-10">
                            <el-popconfirm title="确定解除 “微信公众平台” ？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleLogoutClient({type: 'wechatmpopenid'})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(companyUser.bind.wechat_mp)"
                                           :disabled="!companyUser.bind.wechat_mp">
                                    <icon name="unbind"></icon>
                                    解绑
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 微信公众平台 -->
                <el-descriptions-item label="微信小程序：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input :value="companyUser.api_token || '无'"
                                      size="medium"
                                      disabled></el-input>
                        </div>
                        <div class="ml-10">
                            <el-popconfirm title="确定注销 “微信小程序” 端？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleLogoutClient({type: 'api_token'})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(companyUser.bind.wechat_mini_program)"
                                           :disabled="!companyUser.bind.wechat_mini_program">
                                    <icon name="logout2"></icon>
                                    注销
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 微信公众平台 -->
                <el-descriptions-item label="APP：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input :value="companyUser.app_token || '无'" size="medium" placeholder="无"
                                      disabled></el-input>
                        </div>
                        <div class="ml-10">
                            <el-popconfirm title="确定注销 “求职版APP” 端？"
                                           icon="el-icon-warning"
                                           icon-color="red"
                                           @confirm="handleLogoutClient({type: 'app_token'})">
                                <el-button slot="reference"
                                           size="medium"
                                           :type="unBindButtonSkin(companyUser.bind.app)"
                                           :disabled="!companyUser.bind.app">
                                    <icon name="logout2"></icon>
                                    注销
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-descriptions-item>
                <!-- 账号锁定 -->
                <el-descriptions-item label="账号锁定：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-tooltip :content="`操作时间：${companyUser.lock_time}`" placement="top">
                                <el-tag :type="companyUser.is_lock === 0 ? 'success' : 'danger'"
                                        :disable-transitions="true">
                                    {{ companyUser.is_lock === 0 ? '账户正常' : '账户已锁定' }}
                                </el-tag>
                            </el-tooltip>
                        </div>
                        <div class="ml-10">
                            <el-button :type="companyUser.is_lock === 0 ? 'danger' : 'success'"
                                       size="medium"
                                       @click="handleLock">
                                <icon :name="companyUser.is_lock === 0 ? 'lock' : 'unlock'"></icon>
                                {{ companyUser.is_lock === 0 ? '锁定' : '解锁' }}
                            </el-button>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <!-- 其它 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <span class="detail-project__label">其它</span>
                    </div>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 注册 IP -->
                <el-descriptions-item label="注册 IP："
                                      :content-style="{width: '360px'}">
                    {{ companyUser.regip || '无' }}
                </el-descriptions-item>
                <!-- 注册时间 -->
                <el-descriptions-item label="注册时间：">
                    {{ companyUser.created_at || '无' }}
                </el-descriptions-item>
                <!-- 登录 IP -->
                <el-descriptions-item label="登录 IP：">
                    {{ companyUser.last_login_ip || '无' }}
                </el-descriptions-item>
                <!-- 登录时间 -->
                <el-descriptions-item label="登录时间：">
                    {{ companyUser.last_login_time || '无' }}
                </el-descriptions-item>
                <!-- 更新时间 -->
                <el-descriptions-item label="更新时间：">
                    {{ companyUser.updated_at || '无' }}
                </el-descriptions-item>
                <!-- 更新时间 -->
                <el-descriptions-item label="注册来源：">
                    <el-tag type="warning"
                            :disable-transitions="true">{{ companyUser.register_source_label || '未知' }}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <div class="mt-20 text-right">
            <el-button type="text" size="medium" @click="close">取消</el-button>
            <el-button type="primary"
                       size="medium"
                       native-type="submit"
                       :loading="saveLoading"
                       @click="submitForm">
                <icon name="save"></icon>
                保存
            </el-button>
        </div>

        <!-- dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Prop, Emit } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import FunctionMixin from '@/mixins/function'
import CompanyMixin from '@/mixins/company'

import { toJson, loading, errorMessage, successMessage } from '@/utils'

const module = namespace('cms/companyUser')

import CompanyBasicShow from '@/views/cms/company/company-basic/Show.vue'
import CompanyJobUser from '@/views/cms/company/company-job/CompanyJobUser.vue'
import CompanyUserReceiveResumeSend from '@/views/cms/personal/resume-send/CompanyUserReceiveResumeSend.vue'
import CompanyUserInterview from '@/views/cms/company/interview/CompanyUserInterview.vue'

@Component({
  components: {
    CompanyBasicShow,
    CompanyJobUser,
    CompanyUserReceiveResumeSend,
    CompanyUserInterview
  }
})
export default class Show extends mixins(FunctionMixin, CompanyMixin) {
  @Prop({ type: Object, default: { width: '1000px', visible: false } }) dialog!: any

  // Vuex
  @module.State companyUser!: any
  @module.Action show!: (payLoad: any) => Promise<any>
  @module.Action update!: (payLoad: any) => Promise<any>
  @module.Action modifyUsername!: (payLoad: any) => Promise<any>
  @module.Action modifyPassword!: (payLoad: any) => Promise<any>
  @module.Action bindMobile!: (payLoad: any) => Promise<any>
  @module.Action bindEmail!: (payLoad: any) => Promise<any>
  @module.Action unBind!: (payLoad: any) => Promise<any>
  @module.Action logoutClient!: (payLoad: any) => Promise<any>
  @module.Action lock!: (payLoad: any) => Promise<any>

  // 初始化密码
  private initPassword: string = '123456'

  // form 模型
  public model: any = {
    username: '',
    password: '',
    mobile: '',
    email: ''
  }

  private saveLoading: boolean = false

  /*----- 钩子 -----*/
  created() {
    this.model = toJson(this.companyUser)
  }

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    const _loading = loading({target: '#company-user-show > .el-dialog', background: 'rgba(0, 0, 0, .7)'})
    this.show({id: this.companyUser.uid}).then((res) => {

      this.model = toJson(this.companyUser) // 重新赋给模型

      _loading.close()
      res.status === 200 ? successMessage('重新载入成功！') : errorMessage(res.message)
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 提交表单
   */
  private submitForm(): void | boolean {
    this.saveLoading = true
    this.update({ id: this.companyUser.uid, index: this.dialog.index, params: this.model }).then((res: any) => {
      this.saveLoading = false
      if (res.status !== 200) {
        errorMessage(res.message)
        return false
      }

      this.model = toJson(res.data.show) // 重新赋给 model
      successMessage(res.message)
      this.close()
    }).catch((err: any) => {
      this.saveLoading = false
    })
  }

  /**
   * 绑定按钮 skin
   *
   * @param {boolean} status 状态
   * @private
   */
  protected unBindButtonSkin(status: boolean): string {
    return status ? 'danger' : 'info'
  }

  /**
   * 修改用户名
   *
   * @return {void}
   */
  private handleModifyUsername(): void {
    const _loading = loading({ target: '#edit-personal-user > .el-dialog' })
    const params = {
      uid: this.companyUser.uid,
      username: this.model.username
    }
    this.modifyUsername({ id: this.companyUser.uid, index: this.dialog.index, params }).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理修改密码
   *
   * @param {string} password 密码
   * @return {void}
   */
  private handleModifyPassword(password: string): void {
    const _loading = loading({ target: '#edit-personal-user > .el-dialog' })
    const params = {
      password
    }

    this.modifyPassword({ id: this.companyUser.uid, index: this.dialog.index, params }).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理绑定手机号码
   *
   * @return {void}
   */
  private handleBindMobile(): void {
    const _loading = loading({ target: '#edit-personal-user > .el-dialog' })

    const params = {
      uid: this.companyUser.uid,
      mobile: this.model.mobile
    }

    this.bindMobile({ id: this.companyUser.uid, index: this.dialog.index, params }).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理绑定邮箱
   *
   * @return {void}
   */
  private handleBindEmail(): void {
    const _loading = loading({ target: '#edit-personal-user > .el-dialog' })

    const params = {
      uid: this.companyUser.uid,
      email: this.model.email
    }

    this.bindEmail({ id: this.companyUser.uid, index: this.dialog.index, params }).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理解除绑定
   *
   * @param {Object} params 参数
   * @return {void}
   */
  private handleUnBind(params: any): void {
    const _loading = loading({ target: '#edit-personal-user > .el-dialog', background: 'rgba(0, 0, 0, .5)' })
    this.unBind({ id: this.companyUser.uid, index: this.dialog.index, params }).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理退出客户端
   *
   * @param {Object} params 参数
   * @return {void}
   */
  private handleLogoutClient(params: any): void {
    const _loading = loading({ target: '#edit-personal-user > .el-dialog', background: 'rgba(0, 0, 0, .5)' })
    this.logoutClient({ id: this.companyUser.uid, index: this.dialog.index, params }).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理锁定
   *
   * @return {void}
   */
  private handleLock(): void {
    const _loading = loading({ target: '#edit-personal-user > .el-dialog', background: 'rgba(0, 0, 0, .5)' })
    this.lock({
      id: this.companyUser.uid,
      index: this.dialog.index,
      params: { is_lock: this.companyUser.is_lock }
    }).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  @Emit()
  close(): void {}
}
</script>

<style lang="scss" scoped>
@import '~@/styles/view/edit';

//.el-dialog {
//    ::v-deep &__body {
//        padding: 20px 30px 30px;
//    }
//}

.detail {
    &-label {
        width: 100px;
    }

    &-extra {
        margin-left: 10px;
    }
}
</style>